<template>
    <div id="inspection-detail">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-divider content-position="left">{{ $t('l4vGAiubhrTaPWe5vDq1o') }}</el-divider>
            <v-form :formInfo="formInfoObj"></v-form>

            <template v-if="detailType === 'all'">
                <el-divider content-position="left">{{ $t('wH3zhQoFxyd1I0SxUMvPi') }}</el-divider>
                <el-table :data="ruleForm.providerRecord" style="width: 100%" border>
                    <el-table-column min-width="140" prop="v_ProviderName" :show-overflow-tooltip="true" :label="$t('7ja3z8wWOzzkS6qpSzRco')"  align="center" />
                    <el-table-column min-width="140" prop="v_Reward" :show-overflow-tooltip="true" :label="$t('4M2xvh2QnhSfCyIzDlI0L')"  align="center" />
                    <el-table-column min-width="140" prop="v_Punish" :show-overflow-tooltip="true" :label="$t('sulBiWx7w7y6sKb_53lHl')"  align="center" />
                    <el-table-column min-width="140" prop="n_isValid" :show-overflow-tooltip="true" :label="$t('lrsCQdevxIJnBtC2rAsv')"  align="center">
                        <template #default="scope">
                            <span v-if="scope.row.n_isValid === 1">{{ $t('ss3ajM0x7RzKcihXadp0h') }}</span>
                            <span v-else>{{ $t('3OlzfYe3W0LLu3oH76Sik') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="140" :show-overflow-tooltip="true" :label="$t('9RLaVEiJf1Z1Qv15o6Kll')"  align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.v_Remark">{{ scoped.row.v_Remark }}</span>
                            <span v-else> - </span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="160" :formatter="formatDate" prop="createdTime" :show-overflow-tooltip="true" :label="$t('xxAj6fsjvIsQrMdlNpolv')"  align="center" />
                    <el-table-column min-width="140" prop="createdUserName" :show-overflow-tooltip="true" :label="$t('v7AhfaNeGaFoPfZzgpFk')"  align="center" />
                    <el-table-column min-width="160" :formatter="formatDate" prop="updatedTime" :show-overflow-tooltip="true" :label="$t('hMMqYalIdWhk0McqdxTg')"  align="center" />
                    <el-table-column min-width="140" prop="updatedUserName" :show-overflow-tooltip="true" :label="$t('2Gu4SnAncIkNclplw6vNj')"  align="center" />
                </el-table>

                <el-divider content-position="left">{{ $t('2yxjt3SzFQz6YvMlx1Bc') }}</el-divider>
                <el-table :data="ruleForm.checkChange" style="width: 100%" border>
                    <el-table-column min-width="140" prop="v_ProjectName" :show-overflow-tooltip="true" :label="$t('kJu7Trhi2W73OAVloSf')"  align="center" />
                    <el-table-column min-width="140" prop="v_CheckNGContent" :show-overflow-tooltip="true" :label="$t('yN3XgYqWhrFfTFd4jBtU6')"  align="center" />
                    <el-table-column min-width="160" :formatter="formatDate" prop="d_AskCompliteDate" :show-overflow-tooltip="true" :label="$t('05KrOcxT2AaBoabog6v9X')"  align="center" />
                    <el-table-column min-width="140" prop="v_ExistsContent" :show-overflow-tooltip="true" :label="$t('hgt8rkigvu07O3lOsGgc2')"  align="center" />
                    <el-table-column min-width="140" prop="v_NGTypeName" :show-overflow-tooltip="true" :label="$t('tmruUpoyR5Zja3zkb5oJg')"  align="center" />
                    <el-table-column min-width="140" prop="v_ChangeEmpName" :show-overflow-tooltip="true" :label="$t('z_6MaI6MYIAjEp9UeAfF')"  align="center" />
                    <el-table-column min-width="140" prop="v_ApplyEmpName" :show-overflow-tooltip="true" :label="$t('tPiWuSFanLeOKbJWvfz')"  align="center" />
                    <el-table-column min-width="140" prop="v_AuditEmpName" :show-overflow-tooltip="true" :label="$t('sXyZ6PqmWwEIov0bNsb')"  align="center" />
                    <el-table-column min-width="140" :show-overflow-tooltip="true" :label="$t('ms1fpd4AXyStopkHw95Z8')"  align="center">
                        <template #default="scope">
                            <span v-if="scope.row.v_CheckNgImagePath && scope.row.v_CheckNgImagePath.length !== 0" style="color: #0052D9;cursor:pointer;" @click="imgClick(scope.row.v_CheckNgImagePath , $t('ms1fpd4AXyStopkHw95Z8'))">{{ $t('2KyEk7Ir2Lz3bN9ByjSaE') }}</span>
                            <span v-else>{{ $t('tzv7Fao_8LvfFbddIkvDu') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="140" :show-overflow-tooltip="true" :label="$t('pAwlJ0p0qBAgZqdtvyyHh')"  align="center">
                        <template #default="scope">
                            <span v-if="scope.row.v_CheckChangeImagePath && scope.row.v_CheckChangeImagePath.length !== 0" style="color: #0052D9;cursor:pointer;" @click="imgClick(scope.row.v_CheckChangeImagePath , $t('pAwlJ0p0qBAgZqdtvyyHh'))">{{ $t('2KyEk7Ir2Lz3bN9ByjSaE') }}</span>
                            <span v-else>{{ $t('tzv7Fao_8LvfFbddIkvDu') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="160" :formatter="formatDate" prop="d_CompliteDate" :show-overflow-tooltip="true" :label="$t('bkOkR68JMiDBswcYfFzRt')"  align="center" />
                    <el-table-column min-width="140" :show-overflow-tooltip="true" :label="$t('dyWnpvJ8oFsUicF0Oau4f')"  align="center">
                        <template #default="scope">
                            <span v-if="scope.row.n_CheckChangeState === 1">{{ $t('gsQNjjKc3Gdm5d9qiwHXk') }}</span>
                            <span v-else-if="scope.row.n_CheckChangeState === 2">{{ $t('b5krNrA5QBz0shYNj25') }}</span>
                            <span v-else>{{ $t('uKt4PrCmupaNhgk8hhAo') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="140" :show-overflow-tooltip="true" :label="$t('wmfg6edJuImFjHpeTlbRu')"  align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.c_CheckResult">{{scoped.row.c_CheckResult}}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="140" prop="v_CheckResultContent" :show-overflow-tooltip="true" :label="$t('jdvdRf2a5U7mzqzks5bQq')"  align="center" />
                    <el-table-column min-width="140" prop="v_CheckChangeContent" :show-overflow-tooltip="true" :label="$t('4qSllUxIkPaA8Rqf3Jg8y')"  align="center">
                        <template #default="scope">
                            <span v-if="scope.row.n_isValid === 1">{{ $t('bFpPAglfDrIppcFpgu2P') }}</span>
                            <span v-else>{{ $t('6JUmWl6Dl4sWoUsjLhI') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="140" :show-overflow-tooltip="true" :label="$t('9RLaVEiJf1Z1Qv15o6Kll')"  align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.v_Remark">{{ scoped.row.v_Remark }}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="160" :formatter="formatDate" prop="createdTime" :show-overflow-tooltip="true" :label="$t('xxAj6fsjvIsQrMdlNpolv')"  align="center" />
                    <el-table-column min-width="140" prop="createdUserName" :show-overflow-tooltip="true" :label="$t('v7AhfaNeGaFoPfZzgpFk')"  align="center" />
                    <el-table-column min-width="160" :formatter="formatDate" prop="updatedTime" :show-overflow-tooltip="true" :label="$t('hMMqYalIdWhk0McqdxTg')"  align="center" />
                    <el-table-column min-width="140" prop="updatedUserName" :show-overflow-tooltip="true" :label="$t('2Gu4SnAncIkNclplw6vNj')"  align="center" />
                </el-table>
                
                <el-divider content-position="left">{{ $t('odQpuOypYmCIbyEj44TpZ') }}</el-divider>
                <el-table :data="ruleForm.hazardDetail" style="width: 100%" border>
                    <el-table-column min-width="200" prop="v_WorkType" :show-overflow-tooltip="true" :label="$t('9xM6FvTR_8nWq19wjfgx')"  align="center" />
                    <el-table-column min-width="200" prop="v_WorkExplain" :show-overflow-tooltip="true" :label="$t('f0faXf3TEmiEjagrud8d')"  align="center" />
                    <el-table-column min-width="200" prop="f_Risk_Assessment_L" :show-overflow-tooltip="true" :label="$t('kR6nl8il9ndraLnxdB3Mo')"  align="center" />
                    <el-table-column min-width="200" prop="f_Risk_Assessment_E" :show-overflow-tooltip="true" :label="$t('dF0hvzTTgBxRtEjtHcQ7u')"  align="center" />
                    <el-table-column min-width="200" prop="f_Risk_Assessment_C" :show-overflow-tooltip="true" :label="$t('4H_3Am3S96x5evGuS4uPz')"  align="center" />
                    <el-table-column min-width="200" prop="f_Risk_Assessment_D" :show-overflow-tooltip="true" :label="$t('dEiB4EetFConPmp9cvAhZ')"  align="center" />
                    <el-table-column min-width="200" prop="f_Risk_Assessment_D" :show-overflow-tooltip="true" :label="$t('dEiB4EetFConPmp9cvAhZ')"  align="center" />
                    <el-table-column min-width="200" prop="v_Dangerous_Level" :show-overflow-tooltip="true" :label="$t('gCP5cJhRMe0BnrLqRs')"  align="center" />
                    <el-table-column min-width="200" prop="v_Accient_TypeName" :show-overflow-tooltip="true" :label="$t('ebd7Jl2fPx6WeiyWryLYl')"  align="center" />
                    <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('fw78QmJeZpmsty3o1TeU')"  align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.v_Shielding">{{ scoped.row.v_Shielding }}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('l4v70UyItNhFizQ4AInL6')"  align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.v_Advice_Shielding">{{ scoped.row.v_Advice_Shielding }}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" prop="v_Control_Level" :show-overflow-tooltip="true" :label="$t('7Lw5y52b0yczYwCbDguvq')"  align="center" />
                    <el-table-column min-width="200" prop="v_Control_Measures" :show-overflow-tooltip="true" :label="$t('xCeeB3WeM4ZkHhTh5btqG')"  align="center" />
                    <el-table-column min-width="200" prop="v_OrgName" :show-overflow-tooltip="true" :label="$t('cw6bUPoDlHdwNcW40my')"  align="center" />
                    <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('y7I9J0Du746oyZTnse2kM')"  align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.v_EmpName">{{scoped.row.v_EmpName}}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" prop="v_PushTypeName" :show-overflow-tooltip="true" :label="$t('dHxlDhT9RRckG6mYRjgeQ')"  align="center" />
                    <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('s4KbtSrTfOzuWyRcHgTxx')"  align="center">
                        <template #default="scope">
                            <template v-if="scope.row.v_JobFilePath">
                                <el-link target="_blank" :href="pathData + scope.row.filePaths" type="primary">{{ $t('2KyEk7Ir2Lz3bN9ByjSaE') }}</el-link>
                            </template>
                            <template v-else>
                                <div style="color:#c0c4cc;">
                                    <span>{{ $t('66gSt7xsIbieLa59Td1H') }}</span>
                                </div>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" prop="v_Remake" :show-overflow-tooltip="true" :label="$t('9RLaVEiJf1Z1Qv15o6Kll')"  align="center" />
                    <el-table-column min-width="200" prop="createdTime" :show-overflow-tooltip="true" :label="$t('xxAj6fsjvIsQrMdlNpolv')"  align="center" />
                    <el-table-column min-width="200" prop="createdUserName" :show-overflow-tooltip="true" :label="$t('v7AhfaNeGaFoPfZzgpFk')"  align="center" />
                    <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('hMMqYalIdWhk0McqdxTg')" align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.updatedTime">{{ scoped.row.updatedTime }}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('2Gu4SnAncIkNclplw6vNj')" align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.updatedUserName">{{ scoped.row.updatedUserName }}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            
            <template v-else>
                <el-divider content-position="left">{{ $t('odQpuOypYmCIbyEj44TpZ') }}</el-divider>
                <el-table :data="ruleForm.hazardDetail" style="width: 100%" border>
                    <el-table-column min-width="200" prop="v_WorkType" :show-overflow-tooltip="true" :label="$t('9xM6FvTR_8nWq19wjfgx')"  align="center" />
                    <el-table-column min-width="200" prop="v_WorkExplain" :show-overflow-tooltip="true" :label="$t('f0faXf3TEmiEjagrud8d')"  align="center" />
                    <el-table-column min-width="200" prop="f_Risk_Assessment_L" :show-overflow-tooltip="true" :label="$t('kR6nl8il9ndraLnxdB3Mo')"  align="center" />
                    <el-table-column min-width="200" prop="f_Risk_Assessment_E" :show-overflow-tooltip="true" :label="$t('dF0hvzTTgBxRtEjtHcQ7u')"  align="center" />
                    <el-table-column min-width="200" prop="f_Risk_Assessment_C" :show-overflow-tooltip="true" :label="$t('4H_3Am3S96x5evGuS4uPz')"  align="center" />
                    <el-table-column min-width="200" prop="f_Risk_Assessment_D" :show-overflow-tooltip="true" :label="$t('dEiB4EetFConPmp9cvAhZ')"  align="center" />
                    <el-table-column min-width="200" prop="f_Risk_Assessment_D" :show-overflow-tooltip="true" :label="$t('dEiB4EetFConPmp9cvAhZ')"  align="center" />
                    <el-table-column min-width="200" prop="v_Dangerous_Level" :show-overflow-tooltip="true" :label="$t('gCP5cJhRMe0BnrLqRs')"  align="center" />
                    <el-table-column min-width="200" prop="v_Accient_TypeName" :show-overflow-tooltip="true" :label="$t('ebd7Jl2fPx6WeiyWryLYl')"  align="center" />
                    <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('fw78QmJeZpmsty3o1TeU')"  align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.v_Shielding">{{ scoped.row.v_Shielding }}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('l4v70UyItNhFizQ4AInL6')"  align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.v_Advice_Shielding">{{ scoped.row.v_Advice_Shielding }}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" prop="v_Control_Level" :show-overflow-tooltip="true" :label="$t('7Lw5y52b0yczYwCbDguvq')"  align="center" />
                    <el-table-column min-width="200" prop="v_Control_Measures" :show-overflow-tooltip="true" :label="$t('xCeeB3WeM4ZkHhTh5btqG')"  align="center" />
                    <el-table-column min-width="200" prop="v_OrgName" :show-overflow-tooltip="true" :label="$t('cw6bUPoDlHdwNcW40my')"  align="center" />
                    <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('y7I9J0Du746oyZTnse2kM')"  align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.v_EmpName">{{scoped.row.v_EmpName}}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" prop="v_PushTypeName" :show-overflow-tooltip="true" :label="$t('dHxlDhT9RRckG6mYRjgeQ')"  align="center" />
                    <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('s4KbtSrTfOzuWyRcHgTxx')"  align="center">
                        <template #default="scope">
                            <template v-if="scope.row.v_JobFilePath">
                                <el-link target="_blank" :href="pathData + scope.row.filePaths" type="primary">{{ $t('2KyEk7Ir2Lz3bN9ByjSaE') }}</el-link>
                            </template>
                            <template v-else>
                                <div style="color:#c0c4cc;">
                                    <span>{{ $t('66gSt7xsIbieLa59Td1H') }}</span>
                                </div>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" prop="v_Remake" :show-overflow-tooltip="true" :label="$t('9RLaVEiJf1Z1Qv15o6Kll')"  align="center" />
                    <el-table-column min-width="200" prop="createdTime" :show-overflow-tooltip="true" :label="$t('xxAj6fsjvIsQrMdlNpolv')"  align="center" />
                    <el-table-column min-width="200" prop="createdUserName" :show-overflow-tooltip="true" :label="$t('v7AhfaNeGaFoPfZzgpFk')"  align="center" />
                    <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('hMMqYalIdWhk0McqdxTg')" align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.updatedTime">{{ scoped.row.updatedTime }}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('2Gu4SnAncIkNclplw6vNj')" align="center">
                        <template #default="scoped">
                            <span v-if="scoped.row.updatedUserName">{{ scoped.row.updatedUserName }}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template #footer>
                <el-button @click="cancelUseClick">{{ $t('9YxdWp3OFxHvMW4VGh71') }}</el-button>
            </template>
        </el-dialog>
        <immg-path
            :imgInfo="imgInfo"
            :isImgDialog="isImgDialog"
            :titleImgCon="titleImgCon"
            @cancelImgClick="cancelImgClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDatePicker, ElDialog, ElDivider, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import ImmgPath from './immg-path.vue'
import VForm from './v-form.vue'
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

/*** 定义接口基础数据类型 */
interface formType {
    ruleForm: any,
}
/*** form 表单数据类型 */
type ruleFormType = {}
export default defineComponent( {
    name: 'inspection-detail',
    components: { ImmgPath , VForm },
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        },
        formInfo: {
            type: Object,
            default: {}
        },
        detailType: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const { proxy } = useCurrentInstance();
        const $t = proxy.$t;
        
        const titleCon = ref()
        const detailsType = ref('')
        const pathData = ref(import.meta.env.VITE_API_URL + '/') // 获取地址
        const imgInfo: any = ref([])
        const isImgDialog = ref(false)
        const titleImgCon = ref('')
        const formInfoObj = ref()

        /*** cancelImgClick 图片列表关闭事件 */
        const cancelImgClick = () => {
            isImgDialog.value = false
        }

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            ruleForm: {} as ruleFormType
        })

        /*** 截取日期格式方法 */
        const formatDate = (row:any, column:any) => {
          // 获取单元格数据
          let data = row[column.property];
          if(data == $t('utiIUzqSzcKy0QiDc49n')){
            return '-';
          }else{
            return data;
          }
        }

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelDetailClick')
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelDetailClick')
        }
        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                props.detailType === 'all' ? titleCon.value = $t('he8D83RdrkLmVr49aJklx') : titleCon.value = $t('ysIavqEMgMswxJan_7gbC')
                let getData = JSON.parse(props.repairInfo)
                formInfoObj.value = props.formInfo
                if(getData.hazardDetail || getData.hazardDetail.length !== 0){
                    getData.hazardDetail.map((i:any) => {
                        if(i.n_PushType <= 1){
                            i.v_PushTypeName = $t('7dvrp8KNteJ2KsyX53N')
                        }else if(i.n_PushType === 2){
                            i.v_PushTypeName = $t('0GdEpZhBB3RGlirtCm1U')
                        }else if(i.n_PushType === 3){
                            i.v_PushTypeName = $t('w3sd0wQwiYthGeopJcU4t')
                        }else if(i.n_PushType === 4){
                            i.v_PushTypeName = $t('eec8W28NIj_1hBweAkWs')
                        }else{
                            i.v_PushTypeName = $t('tuRoDlk7koL463Gf9SbzY')
                        }
                    });
                }else{
                    getData.hazardDetail = []
                }
                state.ruleForm = getData
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        /*** imgClick 图片查看 */
        const imgClick = (val:any , num: any) => {
            imgInfo.value = toRaw(val)
            titleImgCon.value = num
            isImgDialog.value = true
        }

        return {
            handleClose,
            cancelUseClick,
            titleCon,
            ...toRefs(state),
            isUseDialog,
            detailsType,
            pathData,
            formLabelWidth: '100px',
            formatDate,
            imgClick,
            imgInfo,
            isImgDialog,
            cancelImgClick,
            titleImgCon,
            formInfoObj,
        }
    },
} )
</script>
<style scoped lang="scss">
    :deep(.el-link__inner){
        color: #0052D9;
    }
    // :deep(.el-divider__text){
    //     color: #303133;
    //     font-weight: bold;
    // }
    .path_look{
        display: block;
        width: 100%;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        span{
          display: block;
          margin-left: 15px;  
          color: #606266;
        }
    }
    .second-level-detail{
        width: 100%;
        margin: auto;
        padding: 10px;
        border: 1px solid #fcfafa;
        border-radius: 2px;
    }
    .data-detail{
        width: 100%;
        border: 1px solid #fcfafa;
        border-radius: 2px;
        padding: 10px;
    }
    .heightcss{
        min-height: 100px;
        max-height: calc(100vh - 750px) !important;
        overflow: auto;
    }
</style>